<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{text}}</h1>
    <div v-text="text"></div>
    <hr/>
    <button v-on:click="fun01">按钮1</button>
    <button @click="fun01">按钮2</button>
    <hr/>
    <h1 v-if="isTrue">哈哈哈哈或或或或或</h1>
    <button @click="isTrue=!isTrue">替换</button>
    <h1 v-show="!isTrue">的点点滴滴多多</h1>
    <hr/>
    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>
    <ol>
        <li v-for="item in list1">{{item.name}}</li>
    </ol>
    <hr/>
    <input v-medol="inputValue">
    <button @click="fun02">更改</button>

</div>
<script>
    let app = new Vue(
        {
            //挂载点
            el: '#app',
            //vdata 定义变量的地方
            data() {
                return {
                    text: 'h1标签',
                    isTrue: true,
                    list: ['张三1', '张三5', '张三4', '张三3', '张三2'],
                    list1: [{
                        name: "张飒",
                    },
                        {
                            name:"张飒1"
                        },
                        {
                            name:"中心"
                        },

                    ],
                    inputValue:''
                }
            },
            //vmethod 定义方法的地方
            methods: {
                fun01() {
                    console.log(123)
                },
                fun02(){
                    console.log('原来输入框的内容：',this.inputValue)
                    this.inputValue='新的内容'
                }
            },

        }
    )

</script>
</body>
</html>